<template>
<el-dialog v-model="dialogVisible" title="审批进度" width="40%">
    <div>
        <el-steps :space="200" :active="1" finish-status="success" align-center>
            <el-step v-for="(item,index) in steps" :key="index" :title="item.name" :status="item.status" :description="item.time"/>
        </el-steps>
    </div>

    <template #footer>

        <span class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">取消</el-button> -->
            <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </span>
    </template>
</el-dialog>
</template>

<script>
import {
    defineComponent,
    ref,
    reactive
} from 'vue'
import {
    getNoApprovalAssetsApi,
} from '../api/examineApi.js'

export default defineComponent({
    setup() {
        const dialogVisible = ref(false);
        const uid = ref(null);
        const showVisible = (rowData) => {
            dialogVisible.value = true;
            uid.value = rowData.identityUuid;
            getSteps(rowData);
        }
        const steps = ref([]);
        const transformData = (data) => {
            let stepList = [];
            if (data && data.length > 0) {
                data.forEach((el, index) => {

                    stepList[index] = {
                        name: el.userName,
                        status: el.agree == 1 ? 'success' : (el.agree == 0 ? 'error' : 'wait'),
                        time:`${el.createTime} \n ${el.content?el.content:''}`
                    }
                });
            }
            stepList = stepList.reverse();
            return stepList;

        }
        const getSteps = (data) => {

            getNoApprovalAssetsApi({
                identityUuid: uid.value,
                // lendingOrReturn:data.lendingOrReturn,
                currentIndex: 1,
                size: 10,
                lendingAndReturnId:data.id
            }).then(res => {
                const resData = res.data;
                if (resData.code == 200) {

                    steps.value = transformData(resData.data.records);
                } else {
                    ElMessage({
                        message: '查询失败',
                        type: 'error',
                    })
                }
            })
        }
        return {
            showVisible,
            dialogVisible,
            uid,
            steps
        }

    },
})
</script>
<style scoped>
.el-steps{
    justify-content: center;
}
</style>
<style>

.el-dialog__title{
    color: #409EFF;
}
</style>